﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="MySqlApi.index" %>

<!DOCTYPE html>


<html>
<head>
    <meta charset="utf-8">
     <link href="./css/style_zz.css" rel="stylesheet" type="text/css" />
    <link href="./css/css.css" rel="stylesheet" type="text/css" />
    
    <title>龙腾PC钢棒大数据管理平台</title>
    
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <%--  滚动--%>
      <script type="text/javascript">
          var timer

          $(document).ready(function () {
              timer = setInterval(AutoScroll, 1500);

              $(".e_list_news").mouseover(
              function () {
                  clearInterval(timer);
              })
              .mouseout(function () {
                  timer = setInterval(AutoScroll, 1500);
              });

              function AutoScroll() {
                  $("#dem").find("ul:first").animate({
                      marginTop: "0px"
                  }, 1500, function () {
                      $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
                  });
              }
          });
</script>
 <%--  时间显示--%>
   <script>
       function tick() {
           var hours, minutes, seconds, xfile;
           var intHours, intMinutes, intSeconds;
           var today, theday;
           today = new Date();
           function initArray() {
               this.length = initArray.arguments.length
               for (var i = 0; i < this.length; i++)
                   this[i + 1] = initArray.arguments[i]
           }
           var d = new initArray(
           "星期日",
           "星期一",
           "星期二",
           "星期三",
           "星期四",
           "星期五",
           "星期六");
           theday = today.getFullYear() + "年"
               + [today.getMonth() + 1]
               + "月" + today.getDate()
               + d[today.getDay() + 1];
           intHours = today.getHours();
           intMinutes = today.getMinutes();
           intSeconds = today.getSeconds();
           if (intHours == 0) {
               hours = "12:";
               xfile = "午夜";
           }
           else if (intHours < 12) {
               hours = intHours + ":";
               xfile = "上午";
           }
           else if (intHours == 12) {
               hours = "12:";
               xfile = "正午";
           }
           else {
               intHours = intHours - 12
               hours = intHours + ":";
               xfile = "下午";
           }
           if (intMinutes < 10) {
               minutes = "0" + intMinutes + ":";
           } else {
               minutes = intMinutes + ":";
           }

           if (intSeconds < 10) {
               seconds = "0" + intSeconds + " ";
           }
           else {
               seconds = intSeconds + " ";
           }
           timeString = theday + " " + xfile + " " + hours + minutes + seconds;
           Clock.innerHTML = timeString;
           window.setTimeout("tick();", 100);
       }
       window.onload = tick;
</script>

 

<STYLE type="text/css">   /*margin:0 120px;*/ 
body { margin:0;  background-color:#edcbcb;background-image:url('img/main.png')}
#main { width:100%; margin:0 auto;}

#left { height: 740px; width: 350px; float: left; }
#leftM { height: 740px; width: 37px; float: left;        
          background-image:url('img/add_left.png');
          background-position:center center;
          background-repeat:no-repeat;
          text-align:center;
}
#middle { height: 740px;margin:0 430px; }
#right{  height: 740px; width: 350px; float: right; }
#rightM {
          height: 740px;
          width: 37px;
          float: right;
          background-image:url('img/add_right.png');
          background-position:center center;
          background-repeat:no-repeat;
          text-align:center;
         

      }


#picL1 {height: 45%; width: 100%;  }
#picL15 {height:10%; width: 100%;  }
#picL2 {height: 45%; width: 100%; }


#picR1 {height: 45%; width: 100%;  }
#picR15 {height: 10%; width: 100%;  }
#picR2 {height: 45%; width: 100%; }

#middleA {height: 15%; width: 100%; 
align-content:center;
text-align:center;
background-attachment:fixed;
}
#middleB {height: 50%; width: 100%;          
          background-image:url('img/add9x1_main.png');
          background-position:center center;
          background-repeat:no-repeat;
          text-align:center;
         
}

#middleB1 {height: 150px; width: 140px;          
        
          background-position:center center;
          background-repeat:no-repeat;
          text-align:center;
          background-color:burlywood;
         
}


#middleC {height: 5%; width: 100%;  text-align:center;
          padding-top:25px;
           color:white;
          font-size:25px;  
}
#middleD {height: 25%; width: 100%;  text-align:center;
          color:white;
          font-size:15px;  
          padding-bottom:20px;
        
}


.middleD_left { height: 25px; width: 16%; float: left;                
                padding-top: 4px;
                text-align: center;  
                 border-bottom-style: inset; border-bottom-width: thin; border-bottom-color: #FFFFCC

                          
}
.middleD_left2 { height: 25px;  float: left; 
                 padding-top: 4px;
                 text-align: center; 


                 border-bottom-style: inset; border-bottom-width: thin; border-bottom-color: #FFFFCC
}


.middleD_leftH { height: 25px; width: 16%; float: left;                
               padding-bottom: 4px;
                text-align: center;  
                background-color:darkslateblue;
                 border-bottom-style: inset; border-bottom-width: thin; border-bottom-color: #FFFFCC

                          
}
.middleD_left2H { height: 25px;  float: left; 
                  padding-bottom: 4px;
                 text-align: center; 
                  background-color:darkslateblue;
                 border-bottom-style: inset; border-bottom-width: thin; border-bottom-color: #FFFFCC
}


.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

          
</STYLE> 

</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main">
        
        <div id="left">
         
            <div id="picL1" ></div>
            <div id="picL15" ></div>
            <div id="picL2" ></div>
               
         </div>
   <div id="leftM"></div>

        <div id="right">
            <div id="picR1" ></div>
            <div id="picR15" ></div>
            <div id="picR2" ></div>
          </div>

        <div id="rightM"></div> 


         <div id="middle">
          
              <div id="middleA" >

                  <img src="img/log.png" alt="s" width="100%" 
                      height="100%" style="max-height:80px;
             max-width:220px;" />
              </div>
             <div id="middleC" >
                  <div>“龙腾PC钢棒大数据管理平台</div>
                  <div id="Clock" align="center" 
                      style="font-size: 16px; color:#edcbcb">

                  </div>
             </div>
             

              <div id="middleB" >
              </div>
              
              <div id="middleD" >
               
                <form id="form1" action="?action=list" runat="server"> 


          <div style="width:100%;  height:125px; overflow:hidden; padding-bottom:60px; ">
         <div id="dem" style=" width:100%; cursor:point;">
             <ul class="e_list_news"  style=" width:100%; 
 overflow:hidden;margin: 0; padding:0px; "> 
        

                    <asp:Repeater ID="Repeater1" runat="server" > 
                <HeaderTemplate>
               
                    <div  class="middleD_leftH"  style="font-size:large">车辆</div> 
                    <div  class="middleD_leftH"  style="font-size:large">仓库</div> 
                    <div  class="middleD_leftH"  style="font-size:large">提单重量</div> 
                    <div  class="middleD_leftH"  style="font-size:large">牌号</div>
                    <div  class="middleD_leftH"  style="font-size:large">规格</div> 
                    <div  class="middleD_left2H" style="font-size:large">开单时间</div> 

            </HeaderTemplate>
                 
           <ItemTemplate>
                        <li>
                     <div class="middleD_left" > <%# Eval("VEHICLE_NO") %></div>  
                     <div class="middleD_left" > <%# Eval("DELI_STORE_CODE") %></div>  
                     <div class="middleD_left" > <%# Eval("PICK_WT") %></div>  
                     <div class="middleD_left" > <%# Eval("SG_SIGN") %></div> 
                     <div class="middleD_left" > <%# Eval("ORD_SPEC_DESC") %></div>                      
                     <div class="middleD_left2" >
                          <%# DateTime.ParseExact(Eval("AUDIT_DATE").ToString(), "yyyyMMddHHmmss", null).ToString("dd HH:mm") %></div>  
                        
                        </li> 

           </ItemTemplate>

                
                </asp:Repeater>

                 
            </ul>
        </div>	
    </div>

                 </form>
 


              </div>
          </div>




    </div>
 
     <script src="purple-passion.js" type="text/javascript" ></script>
     <script type="text/javascript"> //purple - passion
         // 基于准备好的dom，初始化echarts实例
         var myChartL1 = echarts.init(document.getElementById('picL1'), 'dark');
         var myChartL2 = echarts.init(document.getElementById('picL2'), 'dark');

         var myChartR1 = echarts.init(document.getElementById('picR1'), 'dark');
         var myChartR2 = echarts.init(document.getElementById('picR2'), 'dark');

         var myChartMB = echarts.init(document.getElementById('middleB'), 'dark');



         //  var myChart = echarts.init(document.getElementById('main'), 'dark'); // dark 可尝试修改为 light

         $.get('http://58.210.172.37:8088/MySqlApi/api/Kszz91'
            , function (data, status) {

                myChartL1.setOption({
                    backgroundColor: 'rgba(128, 128, 128, 0)',
                    title: {
                        x: 'center',
                        text: '库存产品标准分类'
                    },
                    series: [
                        {
                            name: '分类',
                            type: 'pie',    // 设置图表类型为饼图
                            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            roseType: 'angle',

                            label: { show: true, },
                            encode: { y: 'value' },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{b}\n{@value} 吨'
                                    }
                                }
                            },

                            data: data.data_pie1
                        }
                    ]
                });

                myChartL2.setOption({
                    backgroundColor: 'rgba(128, 128, 128, 0)',
                    dataset: {
                        source: data.data_pie2
                    },
                    title: {
                        x: 'center',
                        text: '库存产品规格分布'
                    },

                    grid: { //图形距离坐标轴上下左右的距离；
                        containLabel: true,
                        borderWidth: 10,
                        y: 60,
                        y2: 10,
                        x: 20,
                        x2: 50
                    },
                    xAxis: {
                        show: false
                    },
                    yAxis: {
                        type: 'category',
                        show: true
                    },
                    series: [
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{@value} 吨'
                                    }
                                }
                            },
                            label: { show: true, },
                            encode: {
                                // 将 "amount" 列映射到 X 轴。                           
                                // 将 "product" 列映射到 Y 轴。
                                y: 'product'
                            }
                        }
                    ]
                });


                myChartR1.setOption({
                    backgroundColor: 'rgba(128, 128, 128, 0)',
                    dataset: { source: data.Table2 },

                    title: {
                        x: 'center',
                        text: '右上',
                        subtext: 'BMI',
                    },
                    legend: {
                        data: ['干预前', '干预后'],
                        top: 50,
                    },
                    tooltip: {},
                    //tooltip: {                           //鼠标移动时显示；参数适用于单个分组；
                    //    trigger: 'item',
                    //    formatter: '{b}:\n{c}%'
                    //},
                    grid: { //图形距离坐标轴上下左右的距离；
                        containLabel: true,
                        borderWidth: 10,
                        y: 100,
                        y2: 10,
                        x: 30,
                        x2: 10
                    },
                    xAxis: {
                        type: 'category',
                        show: true,
                    },
                    yAxis: {
                        type: 'value',
                        show: true,
                        axisLabel: {
                            show: true,
                            interval: 'auto',
                            formatter: '{value}%'
                        },
                    },
                    series: [
                        {
                            type: 'bar',
                            name: '干预前',
                            label: { show: true, },
                            encode: { y: 'VALUE_PRE' },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{@VALUE_PRE}%'
                                    }
                                }
                            },

                        },
                        {
                            type: 'bar',
                            name: '干预后',
                            label: { show: true, },
                            encode: { y: 'VALUE' },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{@VALUE}%'
                                    }
                                }
                            },
                        }
                    ]
                });

                myChartR2.setOption({
                    backgroundColor: 'rgba(128, 128, 128, 0)',
                    dataset: {
                        source: data.Table3
                    },
                    title: {
                        x: 'center',
                        text: '右下图',
                        subtext: '体重',
                    },

                    tooltip: {
                        //trigger: 'item',
                        //formatter: '{b}:\n {@value}%'   //鼠标移动时显示；获取不到参数值；
                    },
                    grid: { //图形距离坐标轴上下左右的距离；
                        containLabel: true,
                        borderWidth: 10,
                        y: 60,
                        y2: 40,
                        x: 30,
                        x2: 10
                    },
                    xAxis: {
                        type: 'category',
                        show: true,
                        name: '体重下降百分比',
                        nameLocation: 'center',
                        nameGap: 30,
                    },
                    yAxis: {
                        type: 'value',
                        show: true,
                        name: '人数百分比',
                        axisLabel: {
                            show: true,
                            interval: 'auto',
                            formatter: '{value}%'
                        },
                    },
                    series: [


                         {
                             type: 'bar',
                             barWidth: '50',
                             label: { show: true, },
                             encode: { y: 'VALUE' },
                             itemStyle: {
                                 normal: {
                                     label: {
                                         show: true,
                                         position: 'top',
                                         formatter: '{@VALUE}%'
                                     }
                                 }
                             },
                         }

                    ]
                });

                myChartMB.setOption({
                    backgroundColor: 'rgba(128, 128, 128, 0)',
                    dataset: { source: data.data_line },
                    title: {
                        x: 'center',
                        text: '右上',
                        subtext: 'BMI',
                    },
                    legend: {
                        data: ['销售盈亏', '干预后'],
                        top: 50,
                    },
                    tooltip: {},
                    //tooltip: {                           //鼠标移动时显示；参数适用于单个分组；
                    //    trigger: 'item',
                    //    formatter: '{b}:\n{c}%'
                    //},
                    grid: { //图形距离坐标轴上下左右的距离；
                        containLabel: true,
                        borderWidth: 10,
                        y: 100,
                        y2: 10,
                        x: 30,
                        x2: 10
                    },
                    xAxis: {
                        type: 'category',
                        show: true,
                    },
                    yAxis: {
                        type: 'value',
                        show: true,
                        axisLabel: {
                            show: true,
                            interval: 'auto',
                            formatter: '{value}'
                        },
                    },
                    series: [
                        {
                            type: 'line',
                            name: '销售盈亏',
                            label: { show: true, },
                            encode: { y: 'AMOUNT_1_MONTH1' },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{@AMOUNT_1_MONTH1}'
                                    }
                                }
                            },                         

                        },
                        {
                            type: 'line',
                            name: '干预后',
                            label: { show: true, },
                            encode: { y: 'AMOUNT_1_MONTH2' },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{@AMOUNT_1_MONTH2}'
                                    }
                                }
                            },
                        }
                    ]
                });


            }, 'json')

    </script>

</body>
</html>
